<template>
  <el-menu
    :default-active="activeIndex"
    class="el-menu-demo"
    mode="horizontal"
    @select="handleSelect"
    background-color="#F5FFFA"
  >
    <el-menu-item index="1" @click="jumpToPatientInfo">患者信息</el-menu-item>
    <el-menu-item index="2" @click="jumpToInspection">检查项目</el-menu-item>
    <el-menu-item index="3" @click="jumpToInspectionResult"
      >检查结果</el-menu-item
    >
    <el-menu-item index="4" @click="jumpToPrescription">处方项目</el-menu-item>
  </el-menu>
  <el-container class="layout-container-demo" style="height: 600px">
    <!-- 路由组件，三级路由 -->
    <el-container>
      <router-view />
    </el-container>
  </el-container>
</template>

<script>
import { ref } from "vue";

const tabPosition = ref("left");

const activeIndex = ref("1");

export default {
  data() {
    return {
      tabPosition,
      activeIndex,
      routers: [
        {
          path: "patientInfo",
        },
        {
          path: "inspection",
        },
        {
          path: "inspectionResult",
        },
        {
          path: "prescription",
        },
      ],
    };
  },

  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    jumpToPatientInfo() {
      this.$router.push({
        path: "patientInfo",
      });
    },
    jumpToInspection() {
      this.$router.push({
        path: "inspection",
      });
    },
    jumpToInspectionResult() {
      this.$router.push({
        path: "inspectionResult",
      });
    },
    jumpToPrescription() {
      this.$router.push({
        path: "prescription",
      });
    },
    jumpToPage(tabsPaneContext, event) {
      console.log("tabsPaneContext:" + tabsPaneContext);
      console.log("event:" + event);
    },
  },
  mounted() {},
};
</script>

<style>
.layout-container-demo .el-header {
  height: 20%;
  position: relative;
  background-color: rgb(174, 236, 235);
  color: var(--el-text-color-primary);
}
.layout-container-demo .el-aside {
  color: var(--el-text-color-primary);
  background: var(--el-color-primary-light-8);
}
.layout-container-demo .el-menu {
  border-right: none;
}
.layout-container-demo .el-main {
  padding: 0;
}
.layout-container-demo .toolbar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  right: 20px;
}

.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}

.el-tabs--right .el-tabs__content,
.el-tabs--left .el-tabs__content {
  height: 100%;
}
</style>
